<template>
	<view class="goshop-wallet-info-container">
		<view class="goshop-wallet-info-head">
			<view class="goshop-wallet-info-head-box">
				<view class="font-bold">{{paymentamountText}}</view>
				<view class="price-color row-x">
					<view v-if="memberInfo.authStatus === 0" class="row-x">
						<view>-</view>
					</view>
					<view v-else class="row-x">
						<view>+</view>
					</view>
					{{walletData.payAmount}}
				</view>
			</view>
		</view>
		<view class="goshop-wallet-info-body">
			<view class="goshop-wallet-info-body-item">
				<view>{{transactiontypeText}}</view>
				<view class="row-x">
					<view v-if="memberInfo.authStatus === 0" class="row-x">
						<view v-if="walletData.tradeType === 2">{{rechargeText}}：</view>
						<view v-else>{{buyText}}：</view>
					</view>
					<view v-else class="row-x">
						<view>{{orderText}}：</view>
					</view>
					<view>{{walletData.goodInfo.name}}</view>
				</view>
			</view>
			<view class="goshop-wallet-info-body-item">
				<view>{{transactionhourText}}</view>
				<view>{{walletData.createTime}}</view>
			</view>
			<view class="goshop-wallet-info-body-item">
				<view>{{ordernumberText}}</view>
				<view>{{walletData.orderSn}}</view>
			</view>
			<view class="goshop-wallet-info-body-remark">
				<view>{{ordernotesText}}</view>
				<view class="u-m-t-10">{{walletData.remark}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {walletInfo} from '@/common/http.api.js';
	import { mapState, mapActions, mapGetters } from 'vuex';
	import jwt from '@/utils/jwt.js';
	export default {
		data() {
			return {
				id:'',
				walletData:{
					goodInfo:{
						name:'',
					}
				},
				isLogin: false,
				paymentamountText:'',
				transactiontypeText:'',
				transactionhourText:'',
				ordernumberText:'',
				ordernotesText:'',
				rechargeText:'',
				buyText:'',
				orderText:'',
			};
		},
		async onShow(){
		  this.refresh();
		  this.isLogin ? await this.getMemberInfo() : this.resetMemberInfo();	
		},
		computed: {
			...mapGetters(['memberInfo'])
		},
		onLoad(e){
			this.id=e.id;
			this.getWalletInfo();
		},
		methods:{
			...mapActions(['getMemberInfo','resetMemberInfo']),
			refresh(){
				this.isLogin = jwt.getLogin();
				this.paymentamountText = this.$t('recordinfo.paymentamount.text');
				this.transactiontypeText = this.$t('recordinfo.transactiontype.text');
				this.transactionhourText = this.$t('recordinfo.transactionhour.text');
				this.ordernumberText = this.$t('recordinfo.ordernumber.text');
				this.ordernotesText = this.$t('recordinfo.ordernotes.text');
				this.rechargeText = this.$t('recordinfo.recharge.text');
				this.buyText = this.$t('recordinfo.buy.text');
				this.orderText = this.$t('recordinfo.order.text');
			},
			getWalletInfo(){
				walletInfo({params: {id: this.id}}).then(res => {
					if (res.code === 0) {
						this.walletData = res.data;
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.goshop-wallet-info-container{
	background-color: $goshop-color-auxiliary-one;
	padding: 20rpx;
	.goshop-wallet-info-head{
		.goshop-wallet-info-head-box{
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid $goshop-text-color-four;
		}
	}
	.goshop-wallet-info-body{
		display: flex;
		flex-direction: column;
		align-items: center;
		.goshop-wallet-info-body-item{
			padding: 10rpx 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: $goshop-text-color-three;
		}
		.goshop-wallet-info-body-remark{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			color: $goshop-text-color-three;
		}
	}
}
</style>
